<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>服务管理</el-breadcrumb-item>
      <el-breadcrumb-item>服务申请</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 员工表单 -->
    <el-card v-if="this.myidentity === '1'">
      <el-form :model="Info" label-width="100px" disabled>
        <el-form-item label="我的工号:">
          <el-input v-model="Info.workId"></el-input>
        </el-form-item>
        <el-form-item label="我的姓名:">
          <el-input v-model="Info.workName"></el-input>
        </el-form-item>
        <el-form-item label="我的联系电话:">
          <el-input v-model="Info.workPhone"></el-input>
        </el-form-item>
        <el-form-item label="我的联系电话:">
          <el-input v-model="Info.workPhone"></el-input>
        </el-form-item>
        <el-form-item label="我的工作社区:">
          <el-input v-model="Info.community"></el-input>
        </el-form-item>
        <el-form-item label="我的工作详细地址:">
          <el-input v-model="Info.address"></el-input>
        </el-form-item>
        <el-form-item label="我的职位:">
          <el-input v-model="Info.jobs"></el-input>
        </el-form-item>
        <el-form-item label="我的权限:">
          <el-tag type="primary" v-if="Info.power ===1">一级</el-tag>
          <el-tag type="success" v-else-if="Info.power ===2">二级</el-tag>
          <el-tag type="danger" v-else-if="Info.power ===3">三级</el-tag>
        </el-form-item>
        <el-form-item label="我的工作状态:">
          <el-tag type="info" v-if="Info.workState ===0">休息中</el-tag>
          <el-tag type="success" v-else-if="Info.workState ===1">工作中</el-tag>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="showEdit()" type="primary">修改信息</el-button>
      </span>
    </el-card>

    <!-- 居民表单 -->
    <el-card v-else>
      <el-form :model="residentInfo" label-width="100px" disabled>
        <el-form-item label="我的居民号:">
          <el-input v-model="residentInfo.residentId"></el-input>
        </el-form-item>
        <el-form-item label="我的姓名:">
          <el-input v-model="residentInfo.residentName"></el-input>
        </el-form-item>
        <el-form-item label="我的身份证:">
          <el-input v-model="residentInfo.residentCard"></el-input>
        </el-form-item>
        <el-form-item label="我的联系电话:">
          <el-input v-model="residentInfo.residentPhone"></el-input>
        </el-form-item>
        <el-form-item label="我的居住社区:">
          <el-input v-model="residentInfo.community"></el-input>
        </el-form-item>
        <el-form-item label="我的详细地址:">
          <el-input v-model="residentInfo.residentAddress"></el-input>
        </el-form-item>
        <el-form-item label="是否流动人口:">
          <el-tag type="success" v-if="residentInfo.residentState ===0">常住人口</el-tag>
          <el-tag type="primary" v-else>流动人口</el-tag>
        </el-form-item>
        <el-form-item label="健康状态:">
          <el-tag type="success" v-if="residentInfo.healthState ===0">健康/未注射疫苗</el-tag>
          <el-tag type="success" v-if="residentInfo.healthState ===1">健康/已打第一针</el-tag>
          <el-tag type="success" v-if="residentInfo.healthState ===2">健康/已打第二针</el-tag>
          <el-tag type="success" v-if="residentInfo.healthState ===3">健康/已打第三针</el-tag>
          <el-tag type="warning" v-else-if="residentInfo.healthState ===4">疑似疫情</el-tag>
          <el-tag type="danger" v-else-if="residentInfo.healthState ===5">确诊</el-tag>
        </el-form-item>
        <el-form-item label="隔离信息:">
          <el-input v-model="residentInfo.lsolate"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="showResident()" type="primary">修改信息</el-button>
      </span>
    </el-card>

    <!-- 修改工作人员对话框 -->
    <el-dialog title="修改" :visible.sync="editWorkerdialogVisible" width="50%" @close="resetEditForm">
      <el-form :model="editForm" ref="editFormRef" label-width="100px">
        <el-form-item label="我的工号:">
          <el-input v-model="editForm.workId" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.workName" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editForm.workPhone"></el-input>
        </el-form-item>
        <el-form-item label="工作社区" prop="community">
          <el-select v-model="editForm.community" :placeholder="editForm.community">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作区域" prop="address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="jobs">
          <el-input v-model="editForm.jobs"></el-input>
        </el-form-item>
        <el-form-item label="工作状态">
          <el-radio v-model="editForm.workState" :label=0>休息中</el-radio>
          <el-radio v-model="editForm.workState" :label=1>工作中</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editWorkerdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editWorker">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改居民对话框 -->
    <el-dialog title="修改" :visible.sync="editResidentdialogVisible" width="50%" @close="resetResidentForm">
      <el-form :model="editResidentForm" ref="editResidentFormRef" label-width="100px">
        <el-form-item label="我的工号:">
          <el-input v-model="editResidentForm.residentId" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editResidentForm.residentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editResidentForm.residentPhone"></el-input>
        </el-form-item>
        <el-form-item label="所在社区" prop="community">
          <el-select v-model="editResidentForm.community" :placeholder="editForm.community">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="editResidentForm.residentAddress"></el-input>
        </el-form-item>
        <el-form-item label="人口性质">
          <el-radio v-model="editResidentForm.residentState" :label=0>常住人口</el-radio>
          <el-radio v-model="editResidentForm.residentState" :label=1>流动人口</el-radio>
        </el-form-item>
        <el-form-item label="健康状态">
          <el-radio v-model="editResidentForm.healthState" :label=0>健康/未注射疫苗</el-radio>
          <el-radio v-model="editResidentForm.healthState" :label=1>健康/已打第一针</el-radio>
          <el-radio v-model="editResidentForm.healthState" :label=2>健康/已打第二针</el-radio>
          <el-radio v-model="editResidentForm.healthState" :label=3>健康/已打第三针</el-radio>
          <el-radio v-model="editResidentForm.healthState" :label=4>疑似</el-radio>
          <el-radio v-model="editResidentForm.healthState" :label=5>确诊</el-radio>

        </el-form-item>
        <el-form-item label="隔离信息">
          <el-input v-model="editResidentForm.lsolate" :disabled="editResidentForm.healthState<4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editResidentdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editResident">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cityData from '../../assets/js/cityData.js'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      Info: {},
      userId: window.sessionStorage.getItem('userId'),
      myidentity: window.sessionStorage.getItem('identity'),
      editWorkerdialogVisible: false,
      editResidentdialogVisible: false,
      editForm: {},
      cityData,
      residentInfo: {},
      editResidentForm: {}
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      if (this.myidentity === '2') {
        const { data: res } = await this.$http.get(`resident/getResidentById/${this.userId}`)
        if (res.meta.status !== 200) {
          return this.$message.error('获取信息失败')
        }
        this.residentInfo = res.data
        return this.$message.success('获取信息成功')
      } else {
        console.log(this.userId)
        const { data: res } = await this.$http.get(`work/getWorkerById/${this.userId}`)
        if (res.meta.status !== 200) {
          return this.$message.error('修改信息失败')
        }
        this.Info = res.data
        return this.$message.success('获取信息成功')
      }
    },
    async showEdit () {
      const { data: res } = await this.$http.get(`work/getWorkerById/${this.Info.workId}`)
      if (res.meta.status !== 200) {
        return this.$message.error('获取信息失败')
      }
      this.editForm = res.data
      this.editWorkerdialogVisible = true
    },
    // 修改员工
    async editWorker () {
      const { data: res } = await this.$http.put(`work/editWorkerById/${this.editForm.workId}`, this.editForm)
      if (res.meta.status !== 200) {
        return this.$message.error('修改失败')
      }
      // console.log(res)
      this.$message.success('成功')
      this.editWorkerdialogVisible = false
      this.getInfo()
    },
    resetEditForm () {
      this.$refs.editFormRef.resetFields()
    },
    // 修改居民
    async showResident () {
      const { data: res } = await this.$http.get(`resident/getResidentById/${this.residentInfo.residentId}`)
      if (res.meta.status !== 200) {
        return this.$message.error('获取信息失败')
      }
      this.editResidentForm = res.data
      this.editResidentdialogVisible = true
    },
    // 修改员工
    async editResident () {
      const { data: res } = await this.$http.put(`resident/editResidentById/${this.editResidentForm.residentId}`, this.editResidentForm)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('修改失败')
      }
      this.$message.success('修改成功')
      this.editResidentdialogVisible = false
      this.getInfo()
    },
    resetResidentForm () {
      this.$refs.editResidentFormRef.resetFields()
    }
  },
  computed: {
    ...mapGetters(['identity'])
  }
}
</script>

<style lang="less" scoped>
</style>
